.custom-container {
  @apply relative my-6 px-6 py-4 break-all;
  > svg {
    @apply absolute left-4 w-7 font-bold;
    top: 1.1rem;
  }
  .custom-container-title {
    @apply my-0 pl-6 font-bold;
  }
  &.tip,
  &.info {
    @apply rounded-lg border-reco-primary border border-solid bg-reco-primary/5;
    .custom-container-title,
    > svg {
      @apply text-reco-primary;
    }
    > p > code {
      @apply bg-reco-primary/20 !important;
    }
  }
  &.warning {
    @apply rounded-lg border-reco-container-warning border border-solid bg-reco-container-warning/5;
    .custom-container-title,
    > svg {
      @apply text-reco-container-warning;
    }
    > p > code {
      @apply bg-reco-container-warning/20 !important;
    }
  }
  &.danger {
    @apply rounded-lg border-reco-container-danger border border-solid bg-reco-container-danger/5;
    .custom-container-title,
    > svg {
      @apply text-reco-container-danger;
    }
    > p > code {
      @apply bg-reco-container-danger/20 !important;
    }
  }
  &.details {
    @apply rounded-lg bg-block border-block;
    .custom-container-title {
      @apply mt-0 pl-0 cursor-pointer;
    }
    > p > code {
      @apply bg-zinc-200 !important;
      @apply dark:bg-zinc-700 !important;
    }
  }
}
